<!DOCTYPE html>
<html>
  <head>
	<title>Reproducto de Audio - Youtube (Beta v1.0)</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
	<script type="text/javascript" src="http://yumiusik.dyndns.org:17070/player/js/swfobject.js"></script>
	<script type="text/javascript" src="http://yumiusik.dyndns.org:17070/player/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="http://jplayer.org/latest/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="http://jplayer.org/latest/js/jquery.jplayer.inspector.js"></script>
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
	<link href="http://jplayer.org/latest/skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://jquerybrasil.org/plugins-br/ui/datagrid/jquery.ui.datagrid.min.js"></script>
	<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.3.min.js"></script>
	<style type='text/css'>
		body {margin:0;padding:0}
		.ui-widget {font:bold 11px Tahoma !important}
		.ui-datagrid {width:100%}
		.ui-datagrid thead th
		,.ui-datagrid tbody td {text-align:left;padding:0.5em 0.3em;vertical-align:middle}
		#data-grid-local {width:500px}

		.ui-corner-tl { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; }
		.ui-corner-tr { -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; }
		.ui-corner-bl { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
		.ui-corner-br { -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
		.ui-corner-top { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; }
		.ui-corner-bottom { -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
		.ui-corner-right {  -moz-border-radius-topright: 2px; -webkit-border-top-right-radius: 2px; border-top-right-radius: 2px; -moz-border-radius-bottomright: 2px; -webkit-border-bottom-right-radius: 2px; border-bottom-right-radius: 2px; }
		.ui-corner-left { -moz-border-radius-topleft: 2px; -webkit-border-top-left-radius: 2px; border-top-left-radius: 2px; -moz-border-radius-bottomleft: 2px; -webkit-border-bottom-left-radius: 2px; border-bottom-left-radius: 2px; }
		.ui-corner-all { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
	</style>
	<style type='text/css'>
		ul#icons {
		    margin: 0;
    		padding: 0;
		}
		ul#icons li {
    		cursor: pointer;
    		float: left;
    		list-style: none outside none;
    		margin: 2px;
    		padding: 4px 0;
    		position: relative;
		}
		ul#icons span.ui-icon {
    		float: left;
    		margin: 0 4px;
		}
		.clearfix:after {
    		clear: both;
    		content: ".";
    		display: block;
		    height: 0;
	    	visibility: hidden;
		}
		.clearfix {
    		display: inline-block;
		}
		* html .clearfix {
    		height: 1%;
		}
		.clearfix {
    		display: block;
		}
	</style>
	</head>

	<body class="content-body">
		<div id="tabs">
			<ul>
				<li><a href="#reproductor">Reproductor (Beta v1.0)</a></li>
			</ul>
			<div id="reproductor">
				<div id="player">
					<table cellspacing="5px" cellpadding="3px" width="100%">
						<tr>
							<td>
								<table>
								<tr>
									<td>
										<h3>Reproductor de Audio</h3>
									</td>
									<td>&nbsp;
										
									</td>
								</tr>
								</table>
							</td>
							<td>&nbsp;
								
							</td>
							<td>
								<table>
								<tr>
									<td>
										<h3>Lista de Reproduccion</h3>
									</td>
									<td>
										<ul id="icons" class="ui-widget ui-helper-clearfix">
											<li class="ui-state-default ui-corner-all" title="Buscar Cancion en YouTube" onclick="javascript:showBuscar();">
												<span class="ui-icon ui-icon-eject"></span>
											</li>
										</ul>
									</td>
								</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
                            	<table>
                                <tr>
                                	<td>
                                    	<table>
                                        <tr>
                                        	<td>
		                                    	<img src="http://yumiusik.dyndns.org:17070/player/images/logo.png" width="74" height="74" />
                                            </td>
                                            <td>
                                            	<div id="player_user_information"></div>
                                            </td>
                                        </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                	<td>
                                        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                                        <div id="jp_container_1" class="jp-audio">
                                            <div class="jp-type-single">
                                                <div class="jp-gui jp-interface">
                                                    <ul class="jp-controls">
                                                        <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                        <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                        <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                        <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                        <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                        <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                                    </ul>
                                                    <div class="jp-progress">
                                                        <div class="jp-seek-bar">
                                                            <div class="jp-play-bar"></div>
                                                        </div>
                                                    </div>
                                                    <div class="jp-volume-bar">
                                                        <div class="jp-volume-bar-value"></div>
                                                    </div>
                                                    <div class="jp-current-time"></div>
                                                    <div class="jp-duration"></div>
                                                    <ul class="jp-toggles">
                                                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                    </ul>
                                                </div>
                                                <div class="jp-title" id="jp-title">
                                                    <ul>
                                                        <li>&nbsp;</li>
                                                    </ul>
                                                </div>
                                                <div class="jp-no-solution">
                                                    <span>Update Required</span>
                                                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                	<td>&nbsp;
                                    	
                                    </td>
                                </tr>
                                <tr>
                                	<td>&nbsp;
                                    	
                                    </td>
                                </tr><!--
                                <tr>
                                	<td>
										<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fyumiusik&amp;layout=button_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
                                        <a href="http://www.facebook.com/yumiusik/" target="_blank">
                                        	<img src="http://yumiusik.dyndns.org:17070/player/images/facebook.png" width="94" height="35" />
                                        </a>
                                    </td>
                                </tr>-->
                                </table>
							</td>
							<td>&nbsp;
								
							</td>
							<td>
								<table>
                                <tr>
                                	<td>
	                                    <div id="data-grid-local"></div>
                                    </td>
                                </tr>
                                </table>
							</td>
						</tr>
					</table>
                    <br/>
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td>
                                &copy; 2013 <a href="#" target="_blank" style="color: red;">YurCompany SAC</a>, Todos los derechos reservados.
                            </td>
                        </tr>
                    </table>
				</div>
			</div>
			<div id="dialog-buscar" title="Buscar Canciones">
				<table cellspacing="0" cellpadding="0">
					<tr>
						<td colspan="3">
							<table>
								<tr>
									<td>Buscar</td>
									<td><input type="text" id="q" name="q" size="150" style="width: 250px"/></td>
									<td><ul id="icons" class="ui-widget ui-helper-clearfix">
                                        	<li class="ui-state-default ui-corner-all" title="Buscar" onclick="javascript:buscar();">
                                          	  <span class="ui-icon ui-icon-search"></span>Buscar
                                            </li>
                                        	<li class="ui-state-default ui-corner-all" title="Limpiar" onclick="javascript:limpiar();">
                                          	  <span class="ui-icon ui-icon-document"></span>Limpiar
                                            </li>
										</ul>
                                    </td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td colspan="3" align="right">
							<table>
								<tr>
									<td id="search-previous-up">&nbsp;
										
									</td>
									<td id="search-next-up">&nbsp;
										
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<div id="data-grid-search"></div>
						</td>
					</tr>
					<tr>
						<td colspan="3" align="right">
							<table>
								<tr>
									<td id="search-previous-down">&nbsp;
										
									</td>
									<td id="search-next-down">&nbsp;
										
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="messageDIV" title="Mensaje">
			<p>Espere mientras el servidor procesa su requerimiento...</p>
		</div>
        <script type='text/javascript'>
			$('#player_user_information');
        </script>
		<script type='text/javascript'>
			$("#messageDIV").dialog({
				height: 140,
				modal: true,
				autoOpen: false
			});
		</script>
	<script type='text/javascript'>
		var _playList = $.evalJSON($.cookie("_3tperu_cookie_playList")) ? $.evalJSON($.cookie("_3tperu_cookie_playList")) : [];
		var _data = [];

		var $dgLocal = $('#data-grid-local');
		var $dgBuscar = $('#data-grid-search');
		$(document).ready(function() {
			$.ajaxSetup({
				headers: {"X-Requested-With":"XMLHttpRequest"}
			});
			$(function() {
				// configuracion de Tabs
				$( "#tabs" ).tabs();

				// Buscador
				$( "#dialog-buscar" ).dialog({autoOpen: false, width: 850, height: 600 });
			});

			$("#jquery_jplayer_1").jPlayer({
				ended: function() {
					findNextSong();
				},
				preload: "auto",
				//errorAlerts: "true",
				solution: "flash, html", 
				swfPath: "<%=request.getContextPath()%>/swf",
				supplied: "mp3",
				wmode: "window"
			});
			/*
			$("#jquery_jplayer_1").bind($.jPlayer.event.error, function(event) {
				if(_playList.length > 0){
					findNextSong();
				}else{
					alert('Debe seleccionar una cancion');
				}
			});*/
			$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});

			drawPlayList();
		});
	</script>
	<script type="text/javascript">
		function drawPlayList(){
			if($dgLocal){
				$dgLocal.datagrid('destroy');
			}
		    $dgLocal.datagrid({
				jsonStore: {
					data: {
						rows: _playList
					}
				}
				,pagination: false
				,rowNumber:true
				,mapper:[{
					name: 'imagen',alias:'Imagen',css:{width:300, textAlign:'center'}
				},{
					name: 'nombre',alias:'Nombre',css:{width:500, textAlign:'left'}
				},{
					name: 'duracion',alias:'Duracion',css:{width:90, textAlign:'center'}
				},{
					name: 'play',alias:'Play',css:{width:50, textAlign:'center'}
				},{
					name: 'remove',alias:'Eliminar',css:{width:50, textAlign:'center'}
				}]
			})
		}
	</script>
	<script type="text/javascript">
			function drawTableResult(){
				if($dgBuscar){
					$dgBuscar.datagrid('destroy');
				}

			    $dgBuscar.datagrid({
					jsonStore: {
						data: {
							rows: _data
							}
					}
					,pagination: false
					,rowNumber:true
					,height: 450
					,mapper:[{
						name: 'imagen',alias:'Imagen',css:{width:300, textAlign:'center'}
					},{
						name: 'nombre',alias:'Nombre',css:{width:500, textAlign:'left'}
					},{
						name: 'duracion',alias:'Duracion',css:{width:90, textAlign:'center'}
					},{
						name: 'agregar',alias:'Add',css:{width:50, textAlign:'center'}
					}]
				});
			}
	</script>
	<script type="text/javascript">
		var actual = -1;
		function showBuscar(){
			$('#q').focus();
			$('#dialog-buscar').dialog('option', 'title', 'Buscar Cancion' );
			$('#dialog-buscar').dialog('option', 'modal', true).dialog('open');
		}
		function buscar(){
			var vq = $('#q').val();
			_data = [];
			if(vq != ''){
				var url_query ='http://yumiusik.dyndns.org:17070/player/search/?vq='+vq+'&start-index=1&max-results=10'
				execURL(url_query);
			}else{
				alert('Debe ingresar un termino para buscar');
			}
		}
		$("#q").keypress(function(event) {
  			if ( event.which == 13 ) {
				buscar();
			}else{
				if ( event.keyCode == 13 ){
					buscar();
				}else{
					if ( event.charCode == 13 ){
						buscar();
					}
				}
			}
		});
		function limpiar(){
			if($dgBuscar){
				$dgBuscar.datagrid('destroy');
				$('#search-previous-up').html('');
				$('#search-next-up').html('');

				$('#search-previous-down').html('');
				$('#search-next-down').html('');
			}
			$('#q').val('');
			$('#q').focus();
		}
		function execURL(url_query){
			_data = [];
			$("#messageDIV").html('<p>Espere mientras el servidor procesa su requerimiento...</p>');
			$("#messageDIV").dialog('open');
			$.ajax({
				type: "GET",
				url: url_query,
				dataType:"jsonp",
				cache: false,
				success: function(result, status){
					var previous = '';
					var next = '';
					var links = $(result).find('link');

					var prev_up = $('#search-previous-up');
					var nxt_up = $('#search-next-up');

					var prev = $('#search-previous-down');
					var nxt = $('#search-next-down');

					for(var i = 0; i < links.length; i++){
						if(links[i].rel == 'previous'){
							previous = links[i].href;
								break;
						}
					}
					for(var i = 0; i < links.length; i++){
						if(links[i].rel == 'next'){
							next = links[i].href;
							break;
						}
					}

					if(previous == ''){
						prev.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-w\" title=\"Anterior\"><span class=\"ui-icon ui-icon-circle-arrow-w\"></span>Anterior</li></ul>');
						prev_up.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-w\" title=\"Anterior\"><span class=\"ui-icon ui-icon-circle-arrow-w\"></span>Anterior</li></ul>');
					}else{
						prev.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-w\" title=\"Anterior\" onclick="javascript:execURL(\'' + previous + '\');"><span class=\"ui-icon ui-icon-circle-arrow-w\"></span><b>Anterior</b></li></ul>');
						prev_up.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-w\" title=\"Anterior\" onclick="javascript:execURL(\'' + previous + '\');"><span class=\"ui-icon ui-icon-circle-arrow-w\"></span><b>Anterior</b></li></ul>');
					}
					if(next == ''){
						nxt.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-e\" title=\"Anterior\"><span class=\"ui-icon ui-icon-circle-arrow-e\"></span>Siguiente</li></ul>');
						nxt_up.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-e\" title=\"Anterior\"><span class=\"ui-icon ui-icon-circle-arrow-e\"></span>Siguiente</li></ul>');
					}else{
						nxt.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-e\" title=\"Anterior\" onclick="javascript:execURL(\'' + next + '\');"><span class=\"ui-icon ui-icon-circle-arrow-e\"></span><b>Siguiente</b></li></ul>');
						nxt_up.html('<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-icon-circle-arrow-e\" title=\"Anterior\" onclick="javascript:execURL(\'' + next + '\');"><span class=\"ui-icon ui-icon-circle-arrow-e\"></span><b>Siguiente</b></li></ul>');
					}
					$(result).find("entry").each(function(index, value){
							var vid = '';
							var id = $(this).children('id').text();
							var title = $(this).find('media\\:title').first().text();
							var vid = $(this).find('media\\:player').first().attr("url");
							var images = $(this).find('media\\:thumbnail').first();
							var video = $(this).find('media\\:content').first();
							var img = images.attr("url");
							var segundos = parseInt(video.attr("duration"));
							var _duracion = $.jPlayer.convertTime(segundos);
							var item = {
								codigo : id,
								link : vid,
								nombre : title,
								imagen : '<img width=\"120\" heigth=\"100\" src=\"' + img + '\">',
								segundos : segundos,
								duracion : _duracion,
								agregar : '<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-corner-all\" title=\"Agregar\" onclick=\"javascript:addToPlayList(\''+index+'\')\"><span class=\"ui-icon ui-icon-plusthick\"></span></li></ul>'
							};
							_data.push(item);
					});
					drawTableResult();
					$("#messageDIV").dialog('close');
				},
				error: function(data, status){
					alert('ocurrio un error [' + data.responseText + ']');
				}
			});
		}
		function addToPlayList(index){
			var item = _data[index];
			$("#messageDIV").html('<p>Verificando el item seleccionado...</p>');
			$("#messageDIV").dialog('open');
			$.ajax({
				type: "POST",
				url: 'http://yumiusik.dyndns.org:17070/player/verifyMP3/',
				cache: false,
				data: {
					url: item.link
				},
				success: function(data, status){
							$("#messageDIV").dialog('close');
							item.play = '<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-corner-all\" title=\"Escuchar\" onclick=\"javascript:play(' + _playList.length + ')\"><span class=\"ui-icon ui-icon-play\"></span></li></ul>';
							item.remove = '<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-corner-all\" title=\"Quitar\" onclick=\"javascript:removeFromPlayList(' + _playList.length + ')\"><span class=\"ui-icon ui-icon-trash\"></span></li></ul>';
							_playList.push(item);
							drawPlayList();
							$.cookie("_3tperu_cookie_playList", $.toJSON(_playList));
							$("#messageDIV").html('<p>Se adiciono la cancion satisfactoriamente a su lista...</p>');
							$("#messageDIV").dialog('open').delay('500').queue(function(){
																				   $("#messageDIV").dialog('close');
																				   $(this).dequeue();
																				});
				},
				error: function(data, status){
					$("#messageDIV").dialog('close');
					$("#messageDIV").html('<p>ocurrio un error al validar el archivo ['+data.responseText+']</p>')
					$("#messageDIV").dialog('open').delay('1000').queue(function(){
																				   $("#messageDIV").dialog('close');
																				   $(this).dequeue();
																				});
				}
			});
			if(_playList.length == 1){
				var mp3 = 'http://yumiusik.dyndns.org:17070/player/mp3low/?url=' + item.link;
				$("#jquery_jplayer_1").jPlayer("setMedia", {
					mp3: mp3
				});
				showTitle(item.nombre);
			}
		}
		function removeFromPlayList(index){
			var nList = [];
			_playList.splice(index, 1);
			for(var i = 0; i < _playList.length; i++){
				var item = _playList[i];
				item.play = '<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-corner-all\" title=\"Escuchar\" onclick=\"javascript:play(' + i + ')\"><span class=\"ui-icon ui-icon-play\"></span></li></ul>';
				item.remove = '<ul id=\"icons\" class=\"ui-widget ui-helper-clearfix\"><li class=\"ui-state-default ui-corner-all\" title=\"Quitar\" onclick=\"javascript:removeFromPlayList(' + i + ')\"><span class=\"ui-icon ui-icon-trash\"></span></li></ul>';
				nList.push(item);
			}
			_playList = nList;
			drawPlayList();
			$.cookie("_3tperu_cookie_playList", $.toJSON(_playList));
		}
		function play(index){
			actual = index;
			var item = _playList[index];
			var mp3 = 'http://yumiusik.dyndns.org:17070/player/mp3low/?url=' + item.link;
			$("#jquery_jplayer_1").jPlayer("setMedia", {
				mp3: mp3
			});
			$("#jquery_jplayer_1").jPlayer("play");
			showTitle(item.nombre);
		}
		function findNextSong(){
			actual ++;
			if(actual >= _playList.length){
				actual = 0;
			}
			var mp3 = 'http://yumiusik.dyndns.org:17070/player/mp3low/?url=' + _playList[actual].link;
			$("#jquery_jplayer_1").jPlayer("setMedia", {
				mp3: mp3
			});
			$("#jquery_jplayer_1").jPlayer("play");
			showTitle(_playList[actual].nombre);
		}
		function showTitle(text){
			var div = $('#jp-title');
			div.html('<ul><li>' + text + '</li></ul>');
		}
	</script>
  </body>
</html>